// 建议用函数组件
// 新知识点：路由懒加载
// 需要涉及到的模块或者组件成员：
//  Suspense组件：由react包提供，其是一个组件
//      语法：<Suspense fallback={加载提示内容/组件}>路由规则</Suspense>
//  lazy方法：由react提供，用于动态加载需要渲染的组件。
//      语法：const 组件运用变量名 = lazy(() => import("组件的路径"))

import React, { Suspense, lazy } from "react";
import { Switch, Redirect, Route } from "react-router-dom";

// 使用lazy导入loading组件
import Loading from "../components/Loading";
const Login = lazy(() => import("../views/login/Index"));
const Dashboard = lazy(() => import("../views/backend/Dashboard"));

const Index = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Switch>
        <Redirect exact from="/" to="/login" />
        <Route path="/login" component={Login} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Suspense>
  );
};

export default Index;
